<template>
  <div class="Sub1">
    <ul class="a">
      <li v-for="(item ,index) in reyin.movieList"  :key="index">
        <div class="img">
          <img :src="item.img" >
        </div>
        <div class="center">
          <div class="title">{{item.nm}}</div>
          <div class="star">主演：{{item.star}}</div>
          <div class="show">{{item.showInfo}}</div>
        </div>
        <div class="right">
          <div class="score">{{item.sc}}分</div>
          <button class="buy" @click="todetail(item.id)">购票</button>
        </div>
      </li>
    </ul>
  <div class="dianzi" ></div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        reyin:{}
      }
    },
    created(){
        this.getlis()
    },
    methods:{
      getlis(){
        this.axios.get("index/movieOnInfoList").then((re)=>{
          console.log("re===>" , re)
          this.reyin = re
        })
      },
      todetail(id){
        this.$router.push(`/moviedetail/${id}` )
      },
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.sub1{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  
}
ul li{
  display: flex;
  padding: 0 3%;
  margin-top: 10px;
}
ul li .img{
  flex:2
  
}
ul li .center{
  flex:6;
  display: inline;
  line-height: 25px;
  justify-content: space-around;
  margin-left: 8px;
  
}
ul li .right{
  flex:2;
}
img{
  width: 100%;
  height: 100%;
}

.center{
  display: flex;

}
.title{
  color: dimgrey;
  font-size:25px ;
  font-weight: bold;
}
.star{
  overflow: hidden;
  text-overflow: ellipsis;
}
.score{
  color: chocolate;
  font-size: 23px;
  font-weight: bold;
  text-align: center;
}
.buy{
  background-color: crimson;
  color:white;
  border-radius: 10px;
  padding: 5px 7px;
  margin-left: 7px;
}
.dianzi{
  width: 100%;
  height: 0vh;
}
</style>